<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch } from "vue"
import axios from "axios"
import { ElMessage } from "element-plus"

import { Search,StarFilled } from '@element-plus/icons-vue'

onMounted(()=>{
    getNews()
})
const loadingNews = ref(true)
const loadingMoreNews = ref(false)
const isEnding = ref(false)
const typeActive = ref(1)
const searchVal = ref('')
const axiosUrl = ref(`https://api.lq.mba/api/dm-it?page=1&num=15`)
const currentPage = ref(1)

let newsList = reactive([])
const topList = [
    {
        id: 1,
        title: 'IT资讯',
        type: 'new'
    },
    {
        id: 2,
        title: '稀土掘金',
        type: 'dailyhot'
    },

    {
        id: 9,
        title: '国际资讯',
        type: 'new'
    },
    {
        id: 3,
        title: '知乎',
        type: 'dailyhot'
    },
    {
        id: 8,
        title: '百度贴吧',
        type: 'dailyhot'
    },
    {
        id: 6,
        title: '微博热搜',
        type: 'dailyhot'
    },
    {
        id: 4,
        title: 'IT之家',
        type: 'dailyhot'
    },

    {
        id: 5,
        title: '今日头条',
        type: 'dailyhot'
    },

    {
        id: 7,
        title: '腾讯新闻',
        type: 'dailyhot'
    },
    {
        id: 0,
        title: '电竞资讯',
        type: 'new'
    }
]
const loadMore = () => {
    if(loadingMoreNews.value){
        return
    }
    currentPage.value += 1
    getNews()
}



const getNews = (url=axiosUrl.value) => {
    loadingMoreNews.value = true
    console.log(url,'url ======== ',searchVal.value)
    if(searchVal.value ){
        url+=`&word=${searchVal.value}`
    }
    if(currentPage.value === 1){
        newsList = []
    }
    axios.get(url).then(({data:{code,msg,data}={}}) => {
        if(code === 200){
            const {newslist,allnum} = data
            newsList.push(...newslist)
            if(allnum < 15){
                isEnding.value = true
            } else {
                isEnding.value = false
            }
        } else {
            ElMessage.error(msg||'检索失败！')
        }
    
  }).finally(()=>{
    loadingNews.value = false
    loadingMoreNews.value = false
  })
}

const goView = ({url}) => {
    window.open(url)
}

const getDailyhotNews = (target) => {
    // 
    if(currentPage.value === 1){
        newsList = []
    }
    axios.get(`https://api.pearktrue.cn/api/dailyhot?title=${target.title}`).then(({data:{code,msg,data}={}}) => {
        if(code === 200){
            data.forEach(({pic:picUrl,id,title,desc:description,url,hot}) => {
                newsList.push({
                    picUrl,id,title,description,url,hot,source:target.title
                })
            });
            console.log(data,'data ======== ',newsList)

        } else {
            ElMessage.error(msg||'检索失败！')
        }
    
  }).finally(()=>{
    loadingNews.value = false
    loadingMoreNews.value = false
  })
}

const changeType = (e:number) => {
    loadingNews.value = true
    currentPage.value = 1
    searchVal.value = ''
    const target = topList.find((({id}) => id === e))
    if(target?.type === 'dailyhot'){
        getDailyhotNews(target)
    } else {
        if(e===1){
        // IT资讯
            axiosUrl.value = `https://api.lq.mba/api/dm-it?page=${currentPage.value}&num=15`
        } else if(e === 0){
            // 电竞资讯
            axiosUrl.value = `https://api.lq.mba/api/dm-it?page=${currentPage.value}&num=15`
        } else if(e=== 9){
            // 国际资讯
            axios.post('http://api.shenke.love/API/other/news_wy_gj.php').then(({data:ajaxData}) => {
                const {code,msg,data} = ajaxData
                console.log(data,ajaxData,'data ======== ')
                if([200,'200'].includes(code)){
                    let listData = []
                    data.forEach(({imgurl:picUrl,tlink:url,source:description,tlink,time:ctime,title},index) => {
                        listData.push({
                            id:index,
                            picUrl,
                            title,
                            ctime,
                            description,
                            url
                        })
                    })
                    // const {newslist,allnum} = data
                    newsList = listData
                    // newsList.push(...newslist)
                    isEnding.value = true
                } else {
                    ElMessage.error(msg||'检索失败！')
                }
            }).finally(()=>{
                loadingNews.value = false
                loadingMoreNews.value = false
            })
        }
        [0,1].includes(e) && getNews(axiosUrl.value)
    }
    
}
</script>

<template>
    <div v-loading="loadingNews" class="news_box">
        <div class="header">
            <div class="left_type">
                <i class="iconfont lbxin-tuwenzixun"></i>
                <div class="type_select">
                    <el-select v-model="typeActive" @change="changeType" placeholder="选择资讯类型" style="width: 115px">
                        <el-option
                            v-for="item in topList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        />
                    </el-select>
                </div>
            </div>
            <div class="right_slot">
                <el-input
                    v-if="[0,1].includes(typeActive.value)"
                    v-model="searchVal"
                    style="width: 140px"
                    size="small"
                    placeholder="检索具体资讯"
                    :suffix-icon="Search"
                    @change="()=>{getNews()}"
                />
            </div>
        </div>
        <div @click="goView(item)" class="list" v-for="(item) in newsList" :key="item.id">
            <div class="left">
                <img :src="item.picUrl||'https://www.lexinkeji.club/Images/news_01.jpg'" :alt="item.title" @error="require('https://www.lexinkeji.club/Images/news_01.jpg')" srcset="">
                <div v-if="item.source" class="source">{{ item.source }}</div>
            </div>
            <div class="right">
                <div class="title overflowClamp2">{{ item.title }}</div>
                <div class="desc overflowClamp2">{{ item.description }}</div>
                <div v-if="item.hot" class="hot"><el-icon><StarFilled /></el-icon>{{ item.hot }}</div>
                <div v-else-if="item.ctime" class="time">{{ item.ctime }}</div>
            </div>
        </div>
        <el-empty v-if="newsList.length === 0" description="暂无数据" :image-size="100" />
        <div v-if="!isEnding" @click="loadMore" class="load_more">{{loadingMoreNews?'加载中...':'加载更多'}}</div>
    </div>
</template>
<style lang="scss">
.news_box{
    .header{
        .el-select{
            .el-select__wrapper{
                background: #acd3fe;
                border: none;
                padding: 0 12px;
                height: 24px;
                min-height: 24px;
                margin-left: 10px;
                .el-select__selected-item,
                .el-select__suffix i{
                    color: #1e80ff;
                }
            }
        }
    }
}
</style>
<style scoped lang="scss">
.news_box{
    width: 100%;
    height: 100%;
    .header{
        width: 100%;
        height: 45px;
        line-height: 45px;
        border-bottom: 2px solid #eee;
        display: flex;
        justify-content: space-between;
        .left_type{
            width: 45%;
            .iconfont{
                vertical-align: middle;
            }
            .type_select{
                width: 100px;
                display: inline-block;
                .el-select{
                    .el-select__wrapper{
                        background: #acd3fe;
                        border: none;
                        padding: 0 6px;
                        height: 24px;
                        min-height: 24px;
                        margin-left: 10px;
                        .el-select__selected-item,
                        .el-select__suffix{
                            color: #1e80ff;
                        }
                    }
                }
            }
        }
    }
    .load_more{
        height: 50px;
        font-size: 14px;
        color: #1677ff;
        width: 100%;
        text-align: center;
        cursor: pointer;
    }
    .list{
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding-bottom: 12px;
        margin-bottom: 12px;
        cursor: pointer;
        &:hover{
            .right{
                .title{
                    color: #1677ff;
                }

            }
        }
        .left{
            width: 25%;
            height: 100%;
            position: relative;
            >img{
                width: 100%;
                border-radius: 4px;
            }
            .source{
                position: absolute;
                bottom: 8px;
                right: 2px;
                background: rgba(153, 153, 153,.7);
                color: #fff;
                font-size: 9px;
                padding: 2px 4px;
                border-radius: 4px;
            }
        }
        .right{
            margin-left: 12px;
            flex: 1;
            .title{
                font-size: 14px;
                font-weight: 500;
                color: #2e3135;
            }
            .desc{
                font-size: 12px;
                color: #5b6169;
                margin: 5px 0 3px 0;
            }
            .time{
                font-size: 10px;
                color: #b2bac2;
                text-align: right;
            }
            .hot{
                color: red;
                .el-icon{
                    vertical-align: text-top;
                    transform: translateY(1px);
                }
            }
        }
    }
}
</style>
